<template>
  <div class="artlist-container">我是ArtList组件</div>
</template>

<script>
export default {
  // created () {
  // abc() //调用abc函数，abc函数没有被定义过所以报错
  // },
  //第一个钩子函数
  // 1. beforeCreate 里面几乎什么都做不了，因为此时 data 数据、methods都没有准备好呢
  beforeCreate () {
    console.log('子--beforeCreate', this.age)
  },
  //第2个钩子函数
  // 2. created 里面可以使用 data、methods等等
  created () {
    console.log('子--created', this.age)
  },
  //第3个钩子函数
  // 3. beforeMount 里面还不能进行DOM操作，因为页面还没有渲染呢
  beforeMount () {
    console.log('子--beforeMount', this.$refs.h2)
  },
  //第4个钩子函数
  // 4. mounted 里面可以进行DOM操作了（此时页面已经渲染完毕
  mounted () {
    console.log('子--mounted', this.$refs.h2)
  },
  //更新阶段
  //第5个钩子函数
  //5. 数据更新了，但页面DOM结构还未更新
  beforeUpdate () {
    console.log('子--beforeUpdate', this.age, this.$refs.p.innerHTML)
  },
  //第6个钩子函数
  //6.数据更新了，页面DOM结构也更新了
  updated () {
    console.log('子--updated', this.age, this.$refs.p.innerHTML)
  },
  // 7. beforeDestroy
  beforeDestroy () {
    console.log('第7个子--', '组件即将被销毁')
    console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  },
  // 8. destroyed
  destroyed () {
    console.log('第8个子--', '组件已经被销毁')
    console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  }
}
</script>
<style lang="less" scoped>
.artlist-container {
  background-color: pink;
  margin: 5px;
  padding: 10px;
}
</style>
